<template>
  <div class="new-wrapper div-wrapper">
    <div class="container">
      <div class="news-award">
        <div class="wrapper">
          <!-- <h3 v-if="$store.state.language === 'zh-CN'">
            新闻动态
          </h3>
          <h3 v-else>
            Recent News
          </h3>-->
          <div class="news-list" v-if="$store.state.language === 'zh-CN'">
            <div class="news-instance" v-for="(item, _) in newsList" :key="_">
              <div class="time">
                <span @click="handleNewDetail(item)">{{item.title}}</span>
                <i class="el-icon-time"></i>
                {{item.time}}
                <span style="color: #dd7f05;font-weight: 500" v-if="item.id == 2">[置顶]</span>
              </div>
              <!-- <div class="news-content" v-html="item.content">{{item.content}}</div> -->
            </div>
          </div>
          <div class="news-list" v-else>
            <div class="news-instance" v-for="(item, _) in enNewsList" :key="_">
              <div class="time">
                <span @click="handleNewDetail(item)">{{item.title}}</span>
                <i class="el-icon-time"></i>
                {{item.time}}
                <span style="color: #dd7f05;font-weight: 500" v-if="item.id == 1">[Topping]</span>
              </div>
              <!-- <div class="news-content" v-html="item.content">{{item.content}}</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { RequestStatus } from "../utils/constans";
import { formatBackTime } from "../utils/common";
import { iPersonInfo, iNew, iAward } from "../typings/personinfo";
import $api from "../api";

@Component
export default class BasicInfo extends Vue {
  private requestStatus: number = 0;

  private newsList: iNew[] = [];
  private enNewsList: iNew[] = [];

  mounted() {
    this.getRecentNews();
  }

  getRecentNews() {
    $api.personInfo.findAllNewsClient().then(res => {
      this.requestStatus += 1;
      const list: iNew[] = res as any;
      list.reverse();
      list.map((record: iNew) => {
        if (
          (record.language === "英语") ||
          record.id == 1
        ) {
          if (record.id == 1) {
            this.enNewsList.unshift(record);
          } else {
            this.enNewsList.push(record);
          }
        }
        if (
          (record.language === "汉语") ||
          record.id == 2
        ) {
          if (record.id == 2) {
            this.newsList.unshift(record);
          } else {
            this.newsList.push(record);
          }
        }
      });
    });
  }

  handleNewDetail(item: any) {
    localStorage.setItem("new-datail-cache", JSON.stringify(item));
    this.$router.push({
      name: "NewDetail",
      params: {
        item
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.new-wrapper {
  .news-list {
    // padding: 0 30px;
  }
  .news-instance {
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ececec;
    .time {
      margin-bottom: 5px;
      line-height: 30px;
      span {
        font-size: 20px;
        float: left;
        font-weight: bold;
        margin-right: 10px;
        cursor: pointer;
        &:hover {
          color: #113f6c;
        }
      }
    }
  }
}
</style>
